<template>

  <el-dialog title="关联联系人" :visible.sync="visible" :close-on-click-modal="false" append-to-body width="800px" @closed="$emit('dialog-close')">

    <el-form ref="main-form" :model="form" :rules="rules" label-width="80px" size="mini">

      <el-form-item label="添加用户" prop="">
        <el-select 
          remote
          :remote-method="fetchAdminList"
          v-model="form.adminId" placeholder="输入用户名查找" clearable filterable>
          <el-option v-for="item in adminList" :key="item.id" :label="item.nick" :value="item.id" style="height: auto; border-bottom: 1px solid #8492b9;">
            <div>
              <div flex>
                <span flex-box="1" style="color: #8492a6; font-size: 13px">用户名</span>
                <span style="">{{ item.username }}</span>
              </div>
              <div flex>
                <span flex-box="1" style="color: #8492a6; font-size: 13px">昵称</span>
                <span style="">{{ item.nick }}</span>
              </div>
              <div flex>
                <span flex-box="1" style="color: #8492a6; font-size: 13px">邮箱</span>
                <span style="">{{ item.email || '-'}}</span>
              </div>
              <div flex>
                <span flex-box="1" style="color: #8492a6; font-size: 13px">手机</span>
                <span style="">{{ item.mobile || '-' }}</span>
              </div>
            </div>
          </el-option>
        </el-select>
        <el-button style="margin-left: 10px;" @click="handleAppendAdmin" :disabled="!form.adminId">添加</el-button>
      </el-form-item>

    </el-form>

    <el-table border size="mini" stripe :data="form.adminList" height="300" style="width: 100%">
      <el-table-column prop="username" label="用户名" align="center" ></el-table-column>
      <el-table-column prop="nick" label="昵称" align="center" ></el-table-column>
      <el-table-column prop="realName" label="真实姓名" align="center" ></el-table-column>
      <el-table-column prop="email" label="邮箱" align="center" ></el-table-column>
      <el-table-column prop="mobile" label="手机号" align="center" ></el-table-column>
      <el-table-column label="" align="center" >
        <template slot-scope="scope">
          <el-button size="mini" @click="handleRemoveAdmin(scope)">取消关联</el-button>
        </template>
      </el-table-column>
    </el-table>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false" size="mini">取 消</el-button>
      <el-button type="primary" @click="submit" size="mini" :loading="loading">提 交</el-button>
    </div>

  </el-dialog>
</template>

<script>

import ApiMain from '@/api/alarm.mch';
import ApiAdmin from '@/api/system.member';
// import ApiMain from '@/api/bank.info';

export default {
  mixins: [
  ],
  props: [
    'alarmBankTypeOptions',
    'bankList',
  ],
  data () {
    return {

      visible: false,
      loading: false,

      adminList: [],

      formRaw: null,
      form: {
        adminId  : '',
        adminList: [],
      },

      rules: {
        bankId: [
          { required: true, message: '这是必填选项', trigger: 'blur' },
        ],
        type: [
          { required: true, message: '这是必填选项', trigger: 'blur' },
        ],
        triggerInterval: [
          { required: true, message: '这是必填选项', trigger: 'blur' },
          { type: 'number', message: '必须为数字', trigger: 'blur' },
        ],
        triggerCount: [
          { required: true, message: '这是必填选项', trigger: 'blur' },
          { type: 'number', message: '必须为数字', trigger: 'blur' },
        ],
        mailInterval: [
          { required: true, message: '这是必填选项', trigger: 'blur' },
          { type: 'number', message: '必须为数字', trigger: 'blur' },
        ],

      },

      id  : null,
      data: null,
    }
  },
  mounted () {
    this.formRaw = Object.copy(this.form);
  },

  methods: {

    show (data = null) {
      this.reset();
      this.fetchData(data);
      this.visible = true;
    },

    reset () {
      this.form = Object.copy(this.formRaw);
    },

    handleAppendAdmin () {
      var admin = this.adminList.find(item => this.form.adminId === item.id);
      this.appendAdmin(admin);
      this.adminList = [];
      this.form.adminId = '';
    },

    appendAdmin (admin) {
      if (!admin) return;
      // 检查有无重复
      var old = this.form.adminList.find(item => admin.id === item.id);
      // 已存在
      if (!!old) return;

      this.form.adminList.push(admin);
    },

    handleRemoveAdmin ({$index, row}) {
      this.form.adminList.splice($index, 1);
    },

    fetchAdminList (val) {
      ApiAdmin.list({page: 1, limit: 8, search: {username: val}})
      .then(re => {
        this.adminList = re.list;
        console.log(Object.copy(re));
      })
      .catch(err => {
        this.adminList = [];
      });
    },

    async fetchData (data) {

      this.data = Object.copy(data);

      if (!this.data) return;

      this.loading = true;

      this.data.triggerInterval = Math.floor(this.data.triggerInterval / 60);
      this.data.mailInterval = Math.floor(this.data.mailInterval / 60);

      try {
        var re = await ApiMain.notifyList({search: {alarmId: this.data.id}});
        this.form.adminList = re.list;
      } catch (err) {
        this.form.adminList = [];
      }

      this.loading = false;

      this.renderData();
    },

    renderData () {

      if (!this.data) return;

      for (var k in this.form) {
        if (this.data.hasOwnProperty(k)) {
          this.form[k] = this.data[k];
        }
      }
    },

    verifyForm () {
      var bool = true;
      this.$refs['main-form'].validate((valid) => bool = valid);
      return bool;
    },

    async submit () {

      if (! this.verifyForm()) return false;

      this.loading = true;

      var req = {
        alarmId: this.data.id,
        adminIdList: this.form.adminList.map(item => item.id)
      };

      // 提交关联
      try {
        var re = await ApiMain.notifyBindSet(req);
        this.$message({message: '操作成功', type: 'success'});
        this.visible = false;
      } catch (err) {

      }



      this.loading = false;

    },
  }
}
</script>

<style>

</style>
